<!--
  Generated template for the QuotationPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="gm-primary">
    <ion-title>行情</ion-title>

    <!--<ion-buttons left>
      <button ion-button icon-only (click)="onShowSelect()">
        <ion-icon name="ios-create-outline"></ion-icon>
      </button>
    </ion-buttons>-->

    <ion-buttons right>
      <button ion-button icon-only (click)="onQuotationRefresh()">
        <ion-icon name="ios-refresh-outline"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

  <div class="fixed-view">
    <button ion-button color="primary" clear full *ngFor="let tab of tab_list;let idx = index"
            [ngClass]="getTabBtnStyle(idx)" (click)="onTabBtnSelected(idx, tab.value)">{{tab.title}}</button>
  </div>

  <ion-row class="sort-layout">
    <ion-col col-4>名称</ion-col>
    <ion-col col-3 class="to-right">现价&emsp;</ion-col>
    <ion-col col-5 class="to-right">涨跌/幅</ion-col>
  </ion-row>
</ion-header>

<ion-content class="bg-color">
  <ion-grid>
    <ion-row class="quo-item" *ngFor="let quotation of quotation_list; let idx = index" (click)="onQuotationDetail(quotation)">
      <ion-col col-4>
        <div class="title-master">{{quotation.name}}</div>
        <div class="title-slave">{{quotation.key}}</div>
      </ion-col>
      <ion-col col-3 [ngClass]="getPriceStyle(idx)">
        <div class="price">{{quotation.tradePrice}}</div>
      </ion-col>
      <ion-col col-5 class="range">
        <div [ngClass]="getRangeStyle(quotation.range)">{{quotation.range}}/{{quotation.rangePercent}}</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
